
        html {
            font-size: 16px;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            -moz-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        body {
            font: 400 16px/1.618 'PingFang SC','Helvetica Neue','Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',Sathu,EucrosiaUPC,sans-serif;
        }   
        body {
            position: relative;
            height: 100vh;
            min-height: 600px;
            background: url(../images/219.jpg); center no-repeat fixed;
            background-size: cover;
            }
            a:link {color:black}
/*        .home-header .logo {
            display: inline-block;
            width: 200px;
            height: 65px;
            margin: 5vh 0 4vh 130px;
            background: url() no-repeat;
        }*/
        .vertical {
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-grid-row-align: center;
            -ms-flex-align: center;
            align-items: center;
        }
        .box {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }
        .home-body-box, .login-body, .logon-body {
            position: relative;
            width: 685px;
            margin: auto;
            padding: 35px 30px;
            color: #666;
            border-radius: 4px;
            background: #fff;
            /* box-shadow: 1px 1px 4px #767676; */
        }
        .login-body .login-tabs {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            overflow: hidden;
            width: 93px;
            height: 93px;
        }
        .home-body-box .login-title, .login-body .login-title, .logon-body .login-title {
            font-size: 1.375rem;
            margin-bottom: 40px;
        }
        .text-center {
            text-align: center;
         }
        .login-body .login-tabs .tab-item {
            position: absolute;
            z-index: 1;
            top: 13px;
            left: 13px;
            display: none;
        }
        .login-body .login-tabs .tab-item .ic-svg {
            width: 40px;
            height: 40px;
        }
        .ic-pc-white {
            background-image: url(ic-qw-white.svg);
        }
        .logon-body .logon-tabs .tab-item {
            display: inline-block;
            float: left;
            width: 50%;
            max-width: 50%;
            padding-bottom: 9px;
            text-align: center;
            border-bottom: 1px solid #eee;
            -webkit-box-flex: 1;
            -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
        }
        .logon-body .logon-tabs .ic-svg {
            width: 18px;
            height: 18px;
            margin-right: 5px;
            vertical-align: sub;
        }
        .sc .hide {
            display: none;
            opacity: 0;
        }
        .hide {
            display: none;
            opacity: 0;
        }
        .login-body .login-tabs .tab-item.active {
            display: inline-block;
        }
        .login-body .login-tabs .tab-item {
            position: absolute;
            z-index: 1;
            top: 13px;
            left: 13px;
            display: none;
        }
        .login-body .login-tabs .tab-bg {
            display: inline-block;
            width: 130px;
            height: 130px;
            margin: -65px 0 0 -65px;
            content: '';
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            background: #31b968;
        }
        .box-aw {
            min-width: 0;
            -webkit-transition: width .2s;
            transition: width .2s;
            -ms-flex-order: 2;
            -webkit-order: 2;
            -webkit-box-ordinal-group: 3;
            order: 2;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            }
        .home-body-box .other-login-wrapper, .login-body .other-login-wrapper, .logon-body .other-login-wrapper {
            width: 220px;
            padding-left: 40px;
            border-left: 1px dashed #eee;
            }
    .box-fr {
        transition: width .2s;
        -ms-flex-order: 3;
        -webkit-order: 3;
        -webkit-box-ordinal-group: 4;
        order: 3;
    }
    .box-fl, .box-fr {
        -webkit-transition: width .2s;
    }
    .login-body .form-wrapper, .logon-body .form-wrapper {
        width: 300px;
       margin:0 auto;
    }
    .home-body-box .form-wrapper .form-item:not(:last-child), .login-body .form-wrapper .form-item:not(:last-child), .logon-body .form-wrapper .form-item:not(:last-child) {
        margin-bottom: 20px;
    }

    .home-body-box .form-wrapper .form-item, .login-body .form-wrapper .form-item, .logon-body .form-wrapper .form-item {
        position: relative;
    }
    .home-body-box .form-wrapper .form-item .form-tips, .login-body .form-wrapper .form-item .form-tips, .logon-body .form-wrapper .form-item .form-tips {
        position: absolute;
        top: 100%;
    }
    .home-body-box .form-wrapper .form-tips, .login-body .form-wrapper .form-tips, .logon-body .form-wrapper .form-tips {
        line-height: 20px;
    }
    .form-wrapper .form-tips {
        font-size: .75rem;
        color: #31b968;
    }
    .home-body-box .form-wrapper .form-button, .login-body .form-wrapper .form-button, .logon-body .form-wrapper .form-button {
        font-size: 1.25rem;
    }
    .checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label {
        line-height: 1;
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        cursor: pointer;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    *, :after, :before, legend {
        box-sizing: border-box;
    }
    label {
        cursor: default;
    }
    .btn a.btn-lg, .btn.btn-lg {
        font-size: 1.125rem;
    }
    .btn-link, .btn-link a {
        padding: 0;
        color: #31b968;
        border: none;
        border-radius: 0;
    }
    .btn-link, .btn-link a {
        padding: 0;
        color: #31b968;
        border: none;
        border-radius: 0;
    }
    .btn, .btn a {
        padding: .4rem 1.2rem;
        cursor: pointer;
        -webkit-transition: all .2s;
        transition: all .2s;
        border: 1px solid transparent;
        border-radius: 2px;
        outline: 0;
    }
    .btn-link, .btn-link a {
        color: #31b968;
    }
        a {
        background-color: transparent;
        -webkit-text-decoration-skip: objects;
        text-decoration: none;
        outline: 0;
    }
    element.style {
        pointer-events: auto;
    }
    .btn a.block, .btn.block {
        display: block;
        width: 100%;
    }
    [type=reset], [type=submit], button, html [type=button] {
        -webkit-appearance: button;
    }
    .btn-green {
        color: #fff;
        background: #31b968;
    }
    .btn, .btn a {
        padding: .4rem 1.2rem;
        cursor: pointer;
        -webkit-transition: all .2s;
        transition: all .2s;
        border: 1px solid transparent;
        /* border-radius: 2px; */
        outline: 0;
    }
    .home-body-box input, .login-body input, .logon-body input {
        width: 100%;
    }
    .checkbox-group input {
        display: none;
        opacity: 0;
    }
    input:not([type=button]) {
        font-size: .875rem;
        line-height: 1.6;
        padding: 12px 20px;
        -webkit-transition: all .2s;
        transition: all .2s;
        color: #666;
        border: 1px solid #dce4e6;
        border-radius: 3px;
        outline: 0;
        background: #f3f6f8;
    }
    .checkbox-group input[type=checkbox]:checked+label:before {
        content: '\2713';
        background-color: #31b968;
    }
    .checkbox-group input[type=checkbox]:checked+label:before, .checkbox-group input[type=radio]:checked+label:before {
        text-align: center;
        color: #fff;
        border-color: #31b968;
    }
    .checkbox-group input[type=checkbox]+label:before {
        border-radius: 3px;
    }
    .checkbox-group input[type=checkbox]+label:before, .checkbox-group input[type=radio]+label:before {
        line-height: 1;
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 8px;
        content: '';
        -webkit-transition: all .2s;
        transition: all .2s;
        color: #fff;
        border: 1px solid #dce4e6;
        background-color: #f3f6f8;
    }
    .home-body-box .other-login-wrapper, .login-body .other-login-wrapper, .logon-body .other-login-wrapper {
        width: 220px;
        padding-left: 40px;
        border-left: 1px dashed #eee;
    }
    .box-fr {
        transition: width .2s;
        -ms-flex-order: 3;
        -webkit-order: 3;
        -webkit-box-ordinal-group: 4;
        order: 3;
    }
    .box-fl, .box-fr {
        -webkit-transition: width .2s;
    }
    .btn a.btn-lg, .btn.btn-lg {
        font-size: 1.125rem;
    }
    .home-body-box .other-login-wrapper .other-login, .login-body .other-login-wrapper .other-login, .logon-body .other-login-wrapper .other-login {
        margin-top: 5px;
    }
    .home-body-box .other-login-wrapper .other-login .login-logo, .login-body .other-login-wrapper .other-login .login-logo, .logon-body .other-login-wrapper .other-login .login-logo {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-top: 10px;
        margin-right: 20px;
        -webkit-transition: all .2s;
        transition: all .2s;
    }
    .home-body-box .other-login-wrapper .other-login .login-logo svg, .login-body .other-login-wrapper .other-login .login-logo svg, .logon-body .other-login-wrapper .other-login .login-logo svg {
        width: 100%;
        height: 100%;
    }
    .home-footer {
        font-size: .875rem;
        line-height: 2;
        width: 100%;
        margin: 5.5vh 0;
        text-align: center;
        color: #fff;
    }
    .home-footer a:not([class]) {
        color: #fff;
    }
    .home-footer a {
        margin: 0 2px;
    }
    }.logon-body .logon-tabs .tab-item.active {
        color: #31b968;
        border-bottom-color: #31b968;
    }
    .logon-body .logon-tabs .tab-item {
        display: inline-block;
        float: left;
        width: 50%;
        max-width: 50%;
        padding-bottom: 9px;
        text-align: center;
        border-bottom: 1px solid #eee;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }
    .tab-item {
        cursor: pointer;
    }   
    .logon-body .logon-tabs .tab-item.active .ic-phone {
        background-image: url(./images/ic-phone-green.svg);
    }
    .ic-mail {
        background-image: url(./images/ic-mail.svg);
    }
    .logon-body .logon-tabs .ic-svg {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: sub;
    }
    .ic-phone {
        background-image: url();
    }
    .ic-svg {
        display: inline-block;
        width: 32px;
        height: 32px;
        margin-left: 10px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .home-body-box, .login-body, .logon-body {
        position: relative;
        width: 685px;
        margin: auto;
        padding: 35px 30px;
        color: #666;
        border-radius: 4px;
        background: #fff;
        box-shadow: 1px 1px 4px #767676;
    }
    .logon-body .logon-tabs {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        width: 300px;
        margin-bottom: 30px;
        margin-left: 38px;
    }
    .logon-body .logon-tabs .ic-svg {
        width: 18px;
        height: 18px;
        margin-right: 5px;
        vertical-align: sub;
    }
    .home-body-box .form-wrapper .form-item .form-tips, .login-body .form-wrapper .form-item .form-tips, .logon-body .form-wrapper .form-item .form-tips {
        position: absolute;
        top: 100%;
    }
    .home-body-box .form-wrapper .form-tips, .login-body .form-wrapper .form-tips, .logon-body .form-wrapper .form-tips {
        line-height: 20px;
    }
    .form-wrapper .form-tips .error, .form-wrapper .form-tips.error {
        color: #e35b5a;
    }
    .form-wrapper .form-tips {
        font-size: .75rem;
        color: #31b968;
    }
    .home-body-box .form-wrapper .form-v-code, .login-body .form-wrapper .form-v-code, .logon-body .form-wrapper .form-v-code {
        line-height: 1;
        width: 120px;
        margin-left: 12px;
    }
    .home-body-box .form-wrapper .form-v-code .v-code-img, .login-body .form-wrapper .form-v-code .v-code-img, .logon-body .form-wrapper .form-v-code .v-code-img {
        height: 100%;
        cursor: pointer;
        border-radius: 3px;
        background: 0 0;
    }
    .home-body-box .form-wrapper .form-phone-code, .login-body .form-wrapper .form-phone-code, .logon-body .form-wrapper .form-phone-code {
        font-size: .875rem;
        display: inherit;
        margin-left: 12px;
    }
    .home-body-box .user-gender, .login-body .user-gender, .logon-body .user-gender {
        padding-bottom: 20px;
    }
    .home-body-box .user-gender .checkbox-group .ic-svg, .login-body .user-gender .checkbox-group .ic-svg, .logon-body .user-gender .checkbox-group .ic-svg {
        position: absolute;
        z-index: 1;
        top: 6px;
        left: -6px;
        width: 16px;
        height: 16px;
    }
    .ic-male {
        background-image: url();
    }
    .home-body-box .user-gender .checkbox-group input:checked+label:before, .login-body .user-gender .checkbox-group input:checked+label:before, .logon-body .user-gender .checkbox-group input:checked+label:before {
    background: #31b968;
}

.home-body-box .user-gender .checkbox-group input+label:before, .login-body .user-gender .checkbox-group input+label:before, .logon-body .user-gender .checkbox-group input+label:before {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background: #c9c9c9;
}
.checkbox-group input[type=radio]:checked+label:before {
    border-width: 6px;
    background: #fff;
}
.checkbox-group input[type=checkbox]:checked+label:before, .checkbox-group input[type=radio]:checked+label:before {
    text-align: center;
    color: #fff;
    border-color: #31b968;
}
.checkbox-group input[type=radio]+label:before {
    border-radius: 50%;
}
.checkbox-group input[type=checkbox]+label:before, .checkbox-group input[type=radio]+label:before {
    line-height: 1;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    content: '';
    -webkit-transition: all .2s;
    transition: all .2s;
    color: #fff;
    border: 1px solid #dce4e6;
    background-color: #f3f6f8;
}
.ic-female {
    background-image: url(./images/ic-female.svg);
}
.osc-checkbox-accept-term {
    font-size: 1rem;
    line-height: 15px;
    position: relative;
    display: inline-block;
    min-width: 17px;
    min-height: 17px;
    vertical-align: middle;
    outline: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.osc-checkbox-accept-term .accept_term {
    width: 15px;
}
.red {
    color: red;
}